<template>
<rs-split class="sys-auth" type="vertical" :minSize="400" fixed @resize="onResize">
    <div class="menu-tree" slot="first">
        <div class="rs-toolbar">角色</div>
        <el-table
            ref="table"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="roles"
            border
            size="small"
            highlight-current-row
            style="width: 100%"
            @row-click="onRoleRowClick"
            >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="jsnm" label="角色编号" width="150"></el-table-column>
                <el-table-column prop="jsmc" label="角色名称"></el-table-column>
        </el-table>
        <RsPagination :currentPage="roleQuery.page" :pageSize="roleQuery.pageSize" :totalCount="roleCount" @change="onRolePageChange"></RsPagination>        
    </div>
    <el-tabs class="tab-wrap" v-model="activeName" type="border-card" ref="unitWrap" slot="last">
        <el-tab-pane label="菜单权限" name="menu">
            <div class="rs-toolbar">
                <el-button-group>
                    <el-button type="warning" size="small" icon="rs-icon-save" @click="onSaveAuth" :disabled="disabledBtn">保存菜单信息</el-button>
                </el-button-group>
            </div>
            <RsScrollbar :top="36">
                <el-tree ref="menuTree" 
                    :data="menus" 
                    current-node-key="root" 
                    :default-expand-all="true"
                    :show-checkbox="true"
                    node-key="cdbh" 
                    :props="defaultProps" 
                    :expand-on-click-node="false" 
                    :render-content="renderContent"
                    @node-click="onTreeNodeClick">
                </el-tree>
            </RsScrollbar>
        </el-tab-pane>
        <el-tab-pane label="URL权限" name="url">
            <div class="rs-toolbar">
                <el-button-group>
                    <el-button type="primary" size="small" icon="rs-icon-save" @click="onAddUrl" :disabled="disabledBtn">添加URL</el-button>
                    <el-button type="primary" size="small" icon="rs-icon-save" @click="onDelUrl" :disabled="disabledUrlBtn">删除URL</el-button>
                </el-button-group>
            </div>
            <el-table
                ref="urlTable"
                @selection-change="onUrlSelectedChange"
                :height="urlTableHeight"
                :data="urls"
                border
                style="width: 100%"
                size="small">
                    <el-table-column type="selection" label="" width="50" align="center"></el-table-column>
                    <el-table-column prop="url" label="URL" width="180"></el-table-column>
                    <el-table-column prop="urlmc" label="描述"></el-table-column>
            </el-table>
            <UrlDlg ref="urlDlg"></UrlDlg>
        </el-tab-pane>
    </el-tabs>
</rs-split>
</template>
<script>
import tips from '../../mixin/tips'
import url from './url'
import menu from './menu'
import UrlDlg from './urlDlg'
import auth from '../../../api/auth'
export default {
    name:'AuthPage',
    mixins:[tips,url,menu],
    components:{UrlDlg},
    data(){
        return {
            activeName:'menu',
            roleQuery:{
                page:0,
                pageSize:20
            },
            selectedRole:null,
            roleCount:0,
            roles:[],
            tableHeight:0,
            urlTableHeight:0
        }
    },
    created(){
        this.loadRoles();
        this.loadMenuTree();
    },
    computed:{
        disabledBtn(){

            return !this.selectedRole;
        },
        disabledUrlBtn(){
            return !this.selectedRole || !this.urlSelectedRows || this.urlSelectedRows.length == 0
        }
    },
    methods:{
        onResize(obj){
            //console.log(obj)
            this.tableHeight = obj.first.height - 68;
            this.urlTableHeight = obj.last.height - 68;
        },
        onRolePageChange(obj){
            this.role.pageSize = obj.pageSize;
            this.role.page = obj.currentPage;
            this.loadRoles();
        },
        onRoleRowClick(row){
            this.selectedRole = row;
            this.loadMenus();
            this.loadUrls();
        },
        loadRoles(){

            this.loading = true;
            auth.queryRole(this.roleQuery)
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.roles = data.list;
                    this.roleCount = data.totalCount;
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
        }
    }
}
</script>